<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Vertical-Align - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">vertical-align</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b><i class="fs">N4</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Positioning Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="top.htm">top</a><br>
    <a href="right.htm">right</a><br>
    <a href="bottom.htm">bottom</a><br>
    <a href="left.htm">left</a><br>
    <a href="overflow.htm">overflow</a><br></td>
    <td valign=top><a href="overflowx.htm">overflow-x</a><br>
    <a href="overflowy.htm">overflow-y</a><br>
    <a href="textoverflow.htm">text-overflow</a><br>
    <a href="clip.htm">clip</a><br>
    <a href="zindex.htm">z-index</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0>
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">baseline</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>Inline and 'table-cell' elements</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left valign=top><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>&lt;<b class="tagname">applet</b>|<b class="tagname">iframe</b>|<b
        class="tagname">img</b>|<b class="tagname">input</b>|<b
        class="tagname">object</b>|<b class="tagname">spacer</b>
        <span class="tagattrib">ALIGN</span>&gt;,<br>
        &lt;<b class="tagname">caption</b>|<b class="tagname">col</b>|<b class="tagname">colgroup</b>|<b
        class="tagname">tbody</b>|<b class="tagname">tfoot</b>|<b class="tagname">thead</b>|<b
        class="tagname">th</b>|<b class="tagname">td</b>|<b class="tagname">tr</b>
        <span class="tagattrib">VALIGN</span>&gt;</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#vertical-align">CSS1: Sect. 5.4.4</a><br> 
        <a href="http://www.w3.org/TR/REC-CSS2/visudet.html#line-height">CSS2: Sect. 10.8</a>,
        <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1: Sect 10.8</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>Element content is typically vertically centered on a rendered line (with
        extra line-height amounts distributed equally on the top and bottom.)
        This property allows in-line content boxes to be vertically aligned with
        respect to several different criteria on a rendered line.
 </dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">N6</b>|<b><i class="fs">O4</i></b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">baseline|middle</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b><i class="fs">N4</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        <b class="alert">baseline</b> - Aligns the baseline of the current element with the
        baseline of the parent element box. If the current element does not have a
        baseline, the bottom of the current element's box should be used.<br>
        <b class="alert">middle</b> - Aligns the vertical midpoint of the current element box
        with the baseline plus half the x-height of the parent.</dd>

<dt><b class="subheading">top|bottom</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b><i class="fs">N4</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        <b class="alert">top</b> - Aligns the top of the current element with the top of
        the tallest element on the currently rendered line.<br>
        <b class="alert">bottom</b> - Aligns the bottom of the current element with the
        bottom of the lowest element on the currently rendered line.</dd>

<dt><b class="subheading">text-top|text-bottom</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b><i class="fs">N4</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        <b class="alert">text-top</b> - Aligns the top of the current element with the top
        of the parent element's font.<br>
        <b class="alert">text-bottom</b> - Aligns the bottom of the current element with the
        bottom of the parent element's font.</dd>

<dt><b class="subheading">super|sub</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>]
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        <b class="alert">super</b> - The baseline of the current element box is aligned to
        the baseline of other superscripted elements in the parent element's box.<br>
        <b class="alert">sub</b> - The baseline of the current element box is aligned to the
        baseline of other subscripted elements in the parent element's box. </dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE6</b>|<b class="s">N6</b>|<b><i class="fs">O3.5</i></b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This specifies an exact distance to raise or lower the current element
        from the default 'baseline' value. Positive values are above the baseline,
        while negative values are below.</dd>

<dt><b class="subheading">[percentage]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE6</b>|<b class="s">N6</b>|<b><i class="fs">O3.5</i></b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        This specifies a distance to raise or lower the current element from the
        default 'baseline' value. Positive percentages are above the baseline, while
        negative values are below. The percentage value is relative to the current
        element's 'line-height' property.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="seelctor">img.left</b>
        { <span class="property">vertical-align:</span> top }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">img</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">vertical-align:</span>
        top&quot;<br><span class="tagattrib">SRC</span>=&quot;image.gif&quot;
        <span class="tagattrib">ALT</span>=&quot;This is a stylish image&quot;&gt;</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>CSS2: "When this property is used with tables, the values have slightly
        different meanings."
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">4.0:</b>
            <dd>- 'sub' and 'super' are ignored for form fields and images.
            <dd><b class="alert2">4.x Mac:</b>
            <dd>- <b class="alert">Reported elsewhere:</b> IE 4.x for the Macintosh
                has mostly-correct support (at least one known glitch) for the values
                'sub|super|top|text-top|middle|text-bottom|bottom|baseline' for text
                and images. It is unknown how this applies to form fields in these
                versions.
            <dd><b class="alert2">4.0+:</b>
            <dd>- Only the 'sub' and 'super' values are honored for text content.
                'Baseline' may also be supported, but all unsupported vertical-align
                values appear to be rendered as 'baseline' should be.
            <dd>- For form fields and images, the 'middle', 'text-top' and
                'text-bottom' values have an effect, but the result is not what
                is expected ('text-bottom' is like 'baseline', and 'text-top'
                is higher than the top of the tallest font on the line.)
            <dd><b class="alert2">5.0+:</b>
            <dd>- 'sub' and 'super' are applied only to the text within form text
                fields (input type=text|password) and button widgets (input
                type=button|reset|submit.) For the Button element, only the value
                'super' has any visible effect.
        </dl>
    <li><b class="alert">Netscape</b>
        <dl>
            <dd><b class="alert2">4.x:</b>
            <dd>- This property only has an effect on images. Values of 'top',
                'text-bottom' and 'baseline' appear to be supported. Values of
                'text-top', 'middle', and 'bottom' are recognized but appear to
                be incorrectly calculated.
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
            <dd><b class="alert2">3.5+:</b>
            <dd>- This property has no effect on form fields.
            <dd>- For inline and image elements, the value 'middle' is not computed
                correctly.
            <dd>- For images, 'text-top' and 'text-bottom' produce unexpected results.
            <dd>- Vertical-align percentage calculation is not computed correctly.
            <dd>- <b class="alert">Reported elsewhere:</b> There are "problems with
                vertical alignment when text and images are mixed in a line of text."
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>